<template>
  <div class="t-table" style="width:100%;">
    <WfTable
      :isShowPagination="false"
      :table="table"
      :columns="table.columns"
      :listTypeInfo="table.listTypeInfo"
    />
    <el-button @click="printTableData">打印</el-button>
  </div>
</template>

<script>
  import WfTable from '../component/table/src/index';
  // import cellEditData from "./cellEditData.json"
  export default {
    components:{
      WfTable
    },
    data () {
      return {
        templateRow:null,
        table: {
          data: [
            {
              area:"1",
              layer:"1",
              isTail:true, // checkbox
              packageNumStart:1,
              packageNumEnd:10,
              endDate:"2020-05-05",
              startDate:"2020-05-31",
              singleWeight:50
            },
            {
              area:"2",
              layer:"2",
              isTail:true,
              packageNumStart:1,
              packageNumEnd:100,
              endDate:"2020-05-20",
              startDate:"2020-05-31",
              singleWeight:5
            }
          ],
          operator: [
            {
              text: '编辑',
              disabled: false,
              fun: this.edit,
              // 什么时候不展示
              // noshow: [{ key: 'isPrint', val: [false] }, { key: 'isEdit', val: [true] }]
              noshow: [{ key: 'isEdit', val: [true] }]
            },
            {
              text: '保存',
              fun: this.creatTag,
              disabled: false,
              // 什么时候展示
              show: { key: 'isEdit', val: [true] }
            },
            {
              text: '取消',
              disabled: false,
              fun: this.cancelEdit,
              show: { key: 'isEdit', val: [true] }
            }
          ],
          // 操作列样式
          operatorConfig: {
            fixed: 'right', // 固定列表右边（left则固定在左边）
            width: 120,
            label: '操作'
          },
          columns: [
            {
              prop: 'area', label: '装炉位置', minWidth: '120', canEdit: true,
              configEdit: {
                label: '装炉位置',
                type: 'select-arr',
                editComponent: 'el-select',
                list: 'furnaceAreaList', // 这个要与furnaceAreaList 里面的对象属性保持一致
                arrLabel: 'dictLabel', // 这个要与furnaceAreaList里面的对象属性保持一致
                arrKey: 'dictValue',
                bind: (scope) => {
                  return {
                    disabled: scope.row.isDisabled ? false : true,  // 默认isDisabled没有值 就是false ，所以就是disabled了
                  }
                }
              },
            },
            {
              prop: 'layer', label: '装炉层', minWidth: '120', canEdit: true, configEdit: {
                label: '装炉层',
                type: 'select-arr',
                editComponent: 'el-select',
                list: 'furnaceLayerList',
                arrLabel: 'dictLabel', // 这个要与furnaceLayerList 里面的对象属性保持一致
                arrKey: 'dictValue',  // 这个要与furnaceLayerList 里面的对象属性保持一致
                bind: (scope) => {
                  return {
                    disabled: scope.row.isDisabled ? false : true,
                  }
                }
              }
            },
            {
              prop: 'isTail', label: '是否尾包', minWidth: '100', canEdit: true,
              configEdit: {
                label: '是否尾包',
                type: 'checkbox',
                editComponent: 'el-checkbox',
                bind: (scope) => {
                  return {
                    disabled: scope.row.isDisabled ? false : true,
                  }
                }
              }
            },
            {
              prop: 'packageNumStart', label: '开始编号', minWidth: '100', canEdit: true,
              configEdit: {
                label: '开始编号',
                type: 'input',
                editComponent: 'el-input',
                bind: (scope) => {
                  return {
                    disabled: scope.row.isDisabled ? false : true,
                  }
                }
              }
            },
            {
              prop: 'packageNumEnd', label: '结束编号', minWidth: '100', canEdit: true,
              configEdit: {
                label: '结束编号',
                type: 'input',
                editComponent: 'el-input',
                bind: (scope) => {
                  return {
                    disabled: scope.row.isDisabled ? false : true,
                  }
                }
              }
            },
            { prop: 'startDate', label: '生产日期', minWidth: '100' },
            { prop: 'endDate', label: '出炉日期', minWidth: '100' },
            {
              prop: 'singleWeight', label: '单包重量（吨）', minWidth: '100', canEdit: true,
              configEdit: {
                label: '单包重量（吨）',
                type: 'input',
                editComponent: 'el-input-number',
                event: 'singleWeight',
                bind: (scope) => {
                  return {
                    controls: false,
                    disabled: scope.row.isDisabled ? false : true,
                    min: 1,
                    max: 9999,
                    precision: 2
                  }
                }
              }
            }
          ],
          listTypeInfo: {
            furnaceAreaList: [
              {
                dictLabel: '炉头',
                dictValue: '1'
              },
              {
                dictLabel: '炉中',
                dictValue: '2'
              },
              {
                dictLabel: '炉尾',
                dictValue: '3'
              },
            ],
            furnaceLayerList: [
              {
                dictLabel: '上层',
                dictValue: '1'
              },
              {
                dictLabel: '中层',
                dictValue: '2'
              },
              {
                dictLabel: '下层',
                dictValue: '3'
              },
            ],
          },
        },
      }
    },
    created () {
      // this.getList()
    },
    methods: {
      getList () {
        // let res = cellEditData
        // if (res.success) {
        //   this.table.data = res.data
        // }
      },
      // 生成标签明细
      creatTag (item) {
        // isEdit 是否处于编辑中,isDisabled 是否禁用(框能否被编辑)
        this.$set(item, 'isEdit', false)
        this.$set(item, 'isDisabled', false)
        // item.isPrint = true
        this.table.operator.map((val) => {
          if (val.text == '编辑') {
            val.disabled = false
          }
        })
      },
      // 编辑
      edit (row) {
        // 编辑的时候先让所有的都是不能编辑
        this.templateRow = this.deepCopy(row)
        this.table.data.map((item) => {
          this.$set(item, 'isEdit', false)
        })
        // 禁用table所有的操作按钮
        this.table.operator.map((item) => {
          if (item.text == '编辑') {
            item.disabled = true
          }
        })
        // 单独让点的这行可以编辑
        this.$set(row, 'isEdit', true)     // 编辑按钮的显示
        this.$set(row, 'isDisabled', true) // 可以编辑了
      },

      // 取消
      cancelEdit (row,index,tableData) {
        // 取消操作按钮禁用
        console.log("取消row",row,index,tableData)
        this.$set(this.table.data, index, this.templateRow)
        this.table.operator.map((item) => {
          if (item.text == '编辑') {
            item.disabled = false
          }
        })
        // this.$set(row, 'isEdit', false)
        // this.$set(row, 'isDisabled', false)
        this.$set(this.table.data[index], 'isEdit', false)
        this.$set(this.table.data[index], 'isDisabled', false)
      },
      printTableData(){
        console.log("table.data",this.table.data)
      },
      deepCopy(obj) {
        if (typeof obj !== 'object') return;
        var newObj = obj instanceof Array ? [] : {};
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {
            // console.log(`${key}:${obj[key]}`)
            newObj[key] = typeof obj[key] === 'object' ? this.deepCopy(obj[key]) : obj[key];// obj[d]= { name:'wf',age:25}
          }
        }
        return newObj;
      }

    }
  }
</script>
